<template>
  <div class="main">
    <!-- 标题 -->
    <img id="img" src="../assets/4.png" alt="" />
    <div class="all">
      <!-- 左侧 -->
      <div>
        <!-- 左上 实验室 -->
        <div style="display: flex">
          <div class="labLeft">
            <!-- 实验室环境 -->
            <div class="labEnvironment">
              <!-- 温度 -->
              <div class="temp">
                <div>
                  <CountTo id="num" :startVal="21" :endVal="21" :duration="1000" />
                  <span id="dw">℃</span>
                </div>
                <div class="syswd">实验室温度</div>
              </div>
              <!-- 湿度 -->
              <div class="humidity">
                <div style="margin-left: 20px">
                  <CountTo id="num" :startVal="40" :endVal="40" :duration="1000" />
                  <span id="num">-</span>
                  <CountTo id="num" :startVal="50" :endVal="50" :duration="1000" />
                  <span id="dw">%</span>
                </div>
                <div class="syswd">实验室湿度</div>
              </div>
            </div>
            <!-- 实验干预提醒 -->
            <div class="intervene">
              <div class="remindMain">
<!--                :data="opsList"-->
                <vue-seamless-scroll :class-option="defaultOption">
                  <div class="remind" v-for="(item, index) in opsList" :key="index">
                    <div>{{item.title}}</div>
                    <div id="new">
                      <div style="position: relative; left: 20px">{{todayStr()}}</div>
                      <div class="tag" v-if="index < 2">
                        <span id="tagert">new</span>
                      </div>
                    </div>
                  </div>
                </vue-seamless-scroll>
              </div>
            </div>
          </div>
          <!-- 实验样品检测表 -->
          <div class="testingTable">
            <div class="testingTitle">
              <div class="newTesing">新建实验</div>
              <div class="centery">
                <img id="lll" src="../assets/lll.png" alt="" />
                <div>{{currentTitle()}}实验样品检测状态表</div>
                <img id="rrr" src="../assets/rrr.png" alt="" />
              </div>
              <div class="testingHistroy">历史实验</div>
            </div>
            <table style="margin-left: 45px">
              <!-- 表头 -->
              <thead>
                <tr class="testingContent">
                  <th style="width: 100px">实验号</th>
                  <th style="width: 64px">样品号</th>
                  <th style="width: 64px">制备状态</th>
                  <th style="width: 64px">拉断测试</th>
                  <th style="width: 64px">弯曲测试</th>
                  <th style="width: 64px">压缩测试</th>
                  <th style="width: 100px">电磁表征测试</th>
                </tr>
              </thead>
              <!-- 表格 -->
              <tbody>
                <div style="overflow: hidden; max-height: 300px">
                  <vue-seamless-scroll :data="tableList" :class-option="defaultOptionTwo">
                    <ul id="tableList" v-for="(item, index) in tableList" :key="index">
                      <li style="width: 100px">
                        <span>{{ item.number }}</span>
                      </li>
                      <li style="width: 64px">
                        <span>{{ item.sample }}</span>
                      </li>
                      <li style="width: 64px" v-if="item.status == 0">
                        <span id="">未制备</span>
                      </li>
                      <li style="width: 64px" v-if="item.status == 1">
                        <span id="">制备中</span>
                      </li>
                      <li style="width: 64px" v-if="item.status == 2">
                        <span id="">已完成</span>
                      </li>
                      <li style="width: 64px" v-if="item.status == 3">
                        <span></span>
                      </li>

                      <li style="width: 64px; display: flex" v-if="item.ldcs == 0">
                        <span id="styleNone">未测试</span>
                      </li>
                      <li style="width: 64px; display: flex" v-if="item.ldcs == 1">
                        <span id="styleYes">测试中</span>
                      </li>
                      <li style="width: 64px; display: flex" v-if="item.ldcs == 2">
                        <span id="styleDone">已完成</span>
                      </li>
                      <li style="width: 64px" v-if="item.ldcs == 3">
                        <span></span>
                      </li>

                      <li style="width: 64px; display: flex" v-if="item.wqcs == 0">
                        <span id="styleNone">未测试</span>
                      </li>
                      <li style="width: 64px; display: flex" v-if="item.wqcs == 1">
                        <span id="styleYes">测试中</span>
                      </li>
                      <li style="width: 64px; display: flex" v-if="item.wqcs == 2">
                        <span id="styleDone">已完成</span>
                      </li>
                      <li style="width: 64px" v-if="item.wqcs == 3">
                        <span></span>
                      </li>

                      <li style="width: 64px; display: flex" v-if="item.yscs == 0">
                        <span id="styleNone">未测试</span>
                      </li>
                      <li style="width: 64px; display: flex" v-if="item.yscs == 1">
                        <span id="styleYes">测试中</span>
                      </li>
                      <li style="width: 64px; display: flex" v-if="item.yscs == 2">
                        <span id="styleDone">已完成</span>
                      </li>
                      <li style="width: 64px" v-if="item.yscs == 3">
                        <span></span>
                      </li>

                      <li style="width: 100px; display: flex" v-if="item.dcbzcs == 0">
                        <span id="styleNone">未测试</span>
                      </li>
                      <li style="width: 100px; display: flex" v-if="item.dcbzcs == 1">
                        <span id="styleYes">测试中</span>
                      </li>
                      <li style="width: 100px; display: flex" v-if="item.dcbzcs == 2">
                        <span id="styleDone">已完成</span>
                      </li>
                      <li style="width: 100px" v-if="item.dcbzcs == 3">
                        <span></span>
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
              </tbody>
            </table>
          </div>
        </div>
        <!-- 左下 设备监测 -->
        <div class="equipmentMonitoring">
          <img id="change" src="../assets/left.png" alt="" />
          <div class="equipmentList">
            <div class="unit" v-for="(item, index) in unitList" :key="index">
              <img :src="item.unitUrl" id="ThreeImg" alt="" />
              <div class="unitTxt">{{ item.name }}</div>
              <div class="testInfo">
                <!-- <CountTo id="num" :startVal="0" :endVal="40" :duration="1000" /> -->
                <div>
                  本年度实验量：
                  <span>{{item.count}}</span>
<!--                  <CountTo :startVal="startValtemp" :endVal="item.count" :duration="1000" />-->
                </div>
                <div>当前实验号：{{ item.number }}</div>
              </div>
              <div class="equipInfo">
                <span class="equxxx">设备状态</span>
                <span class="equyyy">工作</span>
              </div>
              <div class="equipInfo" v-if="index == 0 || index == 1">
                <span class="equxxx">打印时间</span>
                <span class="equyyy" style="font-size: 12px">{{getCurrentDateTime()}}</span>
              </div>
              <div class="equipInfo" v-if="index == 0">
                <span class="equxxx">喷嘴温度</span>
                <span class="equyyy">
                  48
<!--                  <CountTo :startVal="startValtemp" :endVal="48" :duration="1000" />-->
                  ℃</span>
              </div>
              <div class="equipInfo" v-if="index == 0">
                <span class="equxxx">喷嘴流量</span>
                <span class="equyyy">
                  53&nbsp;&nbsp;&nbsp;&nbsp;
<!--                  <CountTo :startVal="startValtemp" :endVal="48" :duration="1000" />-->
                </span>
              </div>
              <div class="equipInfo" v-if="index == 0">
                <span class="equxxx">水冷温度</span>
                <span class="equyyy">
                  22
<!--                  <CountTo :startVal="startValtemp" :endVal="48" :duration="1000" />-->
                  ℃</span>
              </div>
              <div class="equipInfo" v-if="index == 2">
                <span class="equxxx">铺贴层数</span>
                <span class="equyyy">
                  5
<!--                  <CountTo :startVal="startValtemp" :endVal="5" :duration="1000" />-->
                  层</span>
              </div>
              <div class="equipInfo" v-if="index == 2">
                <span class="equxxx">压力</span>
                <span class="equyyy">
                  158
<!--                  <CountTo :startVal="startValtemp" :endVal="158" :duration="1000" />-->
                  kpa</span>
              </div>
              <div class="equipInfo" v-if="index == 2">
                <span class="equxxx">温度</span>
                <span class="equyyy">
                  84
<!--                  <CountTo :startVal="startValtemp" :endVal="48" :duration="1000" />-->
                  ℃</span>
              </div>
              <div class="equipInfo" v-if="index == 2">
                <span class="equxxx">保温时间</span>
                <span class="equyyy">00:58:36</span>
              </div>
            </div>
          </div>
          <img id="change" src="../assets/right.png" alt="" />
        </div>
      </div>
      <!-- 右侧 -->
      <div>
        <!-- 复合材料3D打印 -->
        <div class="rightTablefh">
          <div id="fhcl"></div>
          <div class="intro">4料仓2喷头</div>
        </div>
        <!-- 金属3D打印 -->
        <div class="rightTablejs">
          <div id="jscl"></div>
          <div class="intro">5料仓4喷头</div>
        </div>
        <!-- 力学表征实验 -->
        <div class="rightTablelx">
          <div class="intro" style="padding: 15px 0 0 263px">
            <span style="padding-right: 50px">单位：N</span><span>DX20240642</span>
          </div>
          <div class="lxbzbg">
            <div id="lxbz"></div>
          </div>
        </div>
        <!-- 电磁表征实验 -->
        <div class="rightTabledc">
          <div class="intro" style="padding: 15px 0 0 263px">
            <span style="padding-right: 50px">单位：ε'</span><span>DX20240625</span>
          </div>
          <div class="dcbzbg">
            <div id="dcbz"></div>
            <div style="color: #fff; font-size: 13px; text-align: center">
              Frquency（GHz）
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import * as echarts from "echarts";
  import CountTo from "vue-count-to";
  import vueSeamlessScroll from "vue-seamless-scroll";
  export default {
    components: {
      CountTo,
      vueSeamlessScroll,
    },
    data() {
      return {
        startValtemp: 0,
        endValtemp: 21,
        intervalId: null,
        fhIntervalId: null,
        fhIntervalId1: null,
        fhIntervalId2: null,
        fhIntervalId3: null,
        fhIntervalId4: null,
        fhIntervalId5: null,
        fhIntervalId6: null,
        fhIntervalId7: null,
        fhIntervalId8: null,
        tentativeId: null,
        fhData: [1.61, 1.47, 1.38, 2.71],
        jsData: [1.26, 1.46, 0.33, 0.19, 0.5],
        lxbzData: [
          0.02, 0.02, 0.03, 0.05, 0.06, 0.07, 0.03, -0.07, 0, 0.08, 0.06,
        ],
        dcbzData: [
          0.11, 0.26, 0.24, 0.22, -0.25, -0.3, 0.22, 0.18, 0.26, 0.25, 0.2, 0.26,
          0.24, 0.22, -0.25, -0.22, 0.02, 0.18, 0.26, 0.25,
        ],
        opsList: [
            {
          title: "力学表征单元需要更换拉伸工装、进行拉伸测试",
        }, {
          title: "力学表征单元需要更换弯曲工装、进行弯曲测试",
        }, {
          title: "力学表征单元需要更换拉伸工装、进行拉伸测试",
        }
        ],
        unitList: [{
            name: "S-FRP 3D打印单元",
            count: "160",
            number: "DX20240629",
            unitUrl: require("../assets/a1.jpg"),
          },
          {
            name: "HEA 3D打印单元",
            count: "35",
            number: "DX20240631",
            unitUrl: require("../assets/a2.jpg"),
          },
          {
            name: "C-FRP成型及机加单元",
            count: "128",
            number: "DX20240642",
            unitUrl: require("../assets/a3.png"),
          },
          {
            name: "力学表征单元",
            count: "74",
            number: "DX20240625",
            unitUrl: require("../assets/a4.jpg"),
          },
          {
            name: "电磁表征单元",
            count: "90",
            number: "DX20240606",
            unitUrl: require("../assets/a5.jpg"),
          },
        ],
        tableList: [
          //   {
          //   number: "DX20240622",
          //   sample: "1.5",
          //   status: 1,
          //   ldcs: 0,
          //   wqcs: 3,
          //   yscs: 3,
          //   dcbzcs: 3,
          // },
          // {
          //   number: "DX20240623",
          //   sample: "1.4",
          //   status: 1,
          //   ldcs: 3,
          //   wqcs: 0,
          //   yscs: 3,
          //   dcbzcs: 3,
          // },
          {
            number: "DX20240629",
            sample: "1.1",
            status: 1,
            ldcs: 3,
            wqcs: 0,
            yscs: 3,
            dcbzcs: 3,
          },
          {
            number: "DX20240631",
            sample: "1.3",
            status: 1,
            ldcs: 3,
            wqcs: 0,
            yscs: 3,
            dcbzcs: 3,
          },
          {
            number: "DX20240642",
            sample: "1.1",
            status: 1,
            ldcs: 3,
            wqcs: 3,
            yscs: 1,
            dcbzcs: 3,
          },
          {
            number: "DX20240625",
            sample: "1.0",
            status: 1,
            ldcs: 3,
            wqcs: 3,
            yscs: 3,
            dcbzcs: 1,
          },
        ],
      };
    },
    created() {},
    mounted() {
      this.getData();
      this.getData1();
      this.getData2();
      this.getData3();
      this.startCounting();
      this.fhCounting();
      this.intervalTentative();
      this.currentTitle()
      this.enterFullScreen()
    },
    beforeDestroy() {
      if (this.intervalId) {
        clearInterval(this.intervalId);
      }
      if (this.fhIntervalId) {
        clearInterval(this.fhIntervalId);
      }
      if (this.fhIntervalId1) {
        clearInterval(this.fhIntervalId1);
      }
      if (this.fhIntervalId2) {
        clearInterval(this.fhIntervalId2);
      }
      if (this.fhIntervalId3) {
        clearInterval(this.fhIntervalId3);
      }
      if (this.fhIntervalId4) {
        clearInterval(this.fhIntervalId4);
      }
      if (this.fhIntervalId5) {
        clearInterval(this.fhIntervalId5);
      }
      if (this.fhIntervalId6) {
        clearInterval(this.fhIntervalId6);
      }
      if (this.fhIntervalId7) {
        clearInterval(this.fhIntervalId7);
      }
      if (this.tentativeId) {
        clearInterval(this.tentativeId);
      }
    },

    computed: {
      defaultOption() {
        return {
          step: 1, // 数值越大速度滚动越快
          limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 166, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime: 10000, // 单步运动停止的时间(默认值1000ms)
          scrollTime: 0, // 单步运动的时间(默认值1000ms)
          scrollNum: 1, // 单步运动的距离(默认值1)
          scrollType: 0, // 0匀速 1缓动
        };
      },
      defaultOptionTwo() {
        return {
          step: 1, // 数值越大速度滚动越快
          limitMoveNum: 6, // 开始无缝滚动的数据量 this.dataList.length
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 200, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime: 10000, // 单步运动停止的时间(默认值1000ms)
          scrollTime: 0, // 单步运动的时间(默认值1000ms)
          scrollNum: 1, // 单步运动的距离(默认值1)
          scrollType: 0, // 0匀速 1缓动
        };
      },
    },
    methods: {
      enterFullScreen() {
        const el = document.documentElement;
        if (el.requestFullscreen) {
          el.requestFullscreen();
        } else if (el.mozRequestFullScreen) { /* Firefox */
          el.mozRequestFullScreen();
        } else if (el.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
          el.webkitRequestFullscreen();
        } else if (el.msRequestFullscreen) { /* IE/Edge */
          el.msRequestFullscreen();
        }
      },
      getCurrentDateTime() {
        const now = new Date();
        const year = now.getFullYear();
        const month = ('0' + (now.getMonth() + 1)).slice(-2); // 月份是从0开始的
        const day = ('0' + now.getDate()).slice(-2);
        const hours = ('0' + now.getHours()).slice(-2);
        const minutes = ('0' + now.getMinutes()).slice(-2);
        const seconds = ('0' + now.getSeconds()).slice(-2);

        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      },
      currentTitle() {
        const now = new Date();
        const year = now.getFullYear();
        const month = now.getMonth();
        return year.toString() + "年" + (month + 1).toString() + "月"
      },
      todayStr() {
        const now = new Date();
        const month = now.getMonth();
        const date = now.getDate();
        return (month + 1).toString() + "-" + date.toString()
      },
      // 数据变化 定时任务
      startCounting() {
        if (this.intervalId) return;
        this.intervalId = setInterval(() => {
          // if (this.startValtemp < this.endValtemp) {
          this.startValtemp++;
          // } else {
          //   clearInterval(this.intervalId);
          //   this.intervalId = null;
          // }
        }, 10000); //
      },
      fhCounting() {
        if (this.fhIntervalId) return;
        if (this.fhIntervalId1) return;
        if (this.fhIntervalId2) return;
        if (this.fhIntervalId3) return;
        if (this.fhIntervalId4) return;
        if (this.fhIntervalId5) return;
        if (this.fhIntervalId6) return;
        if (this.fhIntervalId7) return;
        if (this.fhIntervalId8) return;

        console.log(this.fhData[0], "ddddddddddddddd");
        if (this.fhData[0] > 0) {
          this.fhIntervalId = setInterval(() => {
            this.fhData[0] = Number((this.fhData[0] - 0.01).toFixed(2));
            this.getData();
            if (this.fhData[0] <= 0) {
              // clearInterval(this.fhIntervalId);
              // this.fhIntervalId = null
              this.fhData[0] = 1.61;
            }
          }, 1000); //
        }
        if (this.fhData[0] <= 0) {
          clearInterval(this.fhIntervalId);
          this.fhIntervalId = null;
        }

        if (this.fhData[1] > 0) {
          this.fhIntervalId1 = setInterval(() => {
            this.fhData[1] = Number((this.fhData[1] - 0.01).toFixed(2));
            this.getData();
            if (this.fhData[1] <= 0) {
              this.fhData[1] = 1.47;
              // clearInterval(this.fhIntervalId1);
              // this.fhIntervalId1 = null
            }
          }, 1000); //
        }
        if (this.fhData[1] <= 0) {
          clearInterval(this.fhIntervalId1);
          this.fhIntervalId1 = null;
        }

        if (this.fhData[2] > 0) {
          this.fhIntervalId2 = setInterval(() => {
            this.fhData[2] = Number((this.fhData[2] - 0.01).toFixed(2));
            this.getData();
            if (this.fhData[2] <= 0) {
              this.fhData[2] = 1.38;
              // clearInterval(this.fhIntervalId2);
              // this.fhIntervalId2 = null
            }
          }, 1000); //
        }
        if (this.fhData[2] <= 0) {
          clearInterval(this.fhIntervalId2);
          this.fhIntervalId2 = null;
        }

        if (this.fhData[3] > 0) {
          this.fhIntervalId3 = setInterval(() => {
            this.fhData[3] = Number((this.fhData[3] - 0.01).toFixed(2));
            this.getData();
            if (this.fhData[3] <= 0) {
              this.fhData[3] = 2.71;
              // clearInterval(this.fhIntervalId3);
              // this.fhIntervalId3 = null
            }
          }, 1000); //
        }
        if (this.fhData[3] <= 0) {
          clearInterval(this.fhIntervalId3);
          this.fhIntervalId3 = null;
        }

        if (this.jsData[0] > 0) {
          this.fhIntervalId4 = setInterval(() => {
            this.jsData[0] = Number((this.jsData[0] - 0.01).toFixed(2));
            this.getData1();
            if (this.jsData[0] <= 0) {
              this.jsData[0] = 1.26;
              // clearInterval(this.fhIntervalId4);
              // this.fhIntervalId4 = null
            }
          }, 1000); //
        }
        if (this.jsData[0] <= 0) {
          clearInterval(this.fhIntervalId4);
          this.fhIntervalId4 = null;
        }

        if (this.jsData[1] > 0) {
          this.fhIntervalId5 = setInterval(() => {
            this.jsData[1] = Number((this.jsData[1] - 0.01).toFixed(2));
            this.getData1();
            if (this.jsData[1] <= 0) {
              this.jsData[1] = 1.46;
              // clearInterval(this.fhIntervalId5);
              // this.fhIntervalId5 = null
            }
          }, 1000); //
        }
        if (this.jsData[1] <= 0) {
          clearInterval(this.fhIntervalId5);
          this.fhIntervalId5 = null;
        }

        if (this.jsData[2] > 0) {
          this.fhIntervalId6 = setInterval(() => {
            this.jsData[2] = Number((this.jsData[2] - 0.01).toFixed(2));
            this.getData1();
            if (this.jsData[2] <= 0) {
              this.jsData[2] = 0.33;
              // clearInterval(this.fhIntervalId6);
              // this.fhIntervalId6 = null
            }
          }, 1000); //
        }
        if (this.jsData[2] <= 0) {
          clearInterval(this.fhIntervalId6);
          this.fhIntervalId6 = null;
        }

        if (this.jsData[3] > 0) {
          this.fhIntervalId7 = setInterval(() => {
            this.jsData[3] = Number((this.jsData[3] - 0.01).toFixed(2));
            this.getData1();
            if (this.jsData[3] <= 0) {
              this.jsData[3] = 0.19;
              // clearInterval(this.fhIntervalId7);
              // this.fhIntervalId7 = null
            }
          }, 1000); //
        }
        if (this.jsData[3] <= 0) {
          clearInterval(this.fhIntervalId7);
          this.fhIntervalId7 = null;
        }

        if (this.jsData[4] > 0) {
          this.fhIntervalId8 = setInterval(() => {
            this.jsData[4] = Number((this.jsData[4] - 0.01).toFixed(2));
            this.getData1();
            if (this.jsData[4] <= 0) {
              this.jsData[4] = 0.5;
              // clearInterval(this.fhIntervalId8);
              // this.fhIntervalId8 = null
            }
          }, 1000); //
        }
        if (this.jsData[4] <= 0) {
          clearInterval(this.fhIntervalId8);
          this.fhIntervalId8 = null;
        }
      },
      // 实验 折线图
      intervalTentative() {
        if (this.tentativeId) return;
        this.tentativeId = setInterval(() => {
          this.lxbzData = this.lxbzData.reverse();
          this.getData2();
          this.dcbzData = this.dcbzData.reverse();
          this.getData3();
          //  console.log(this.lxbzData);
        }, 5000);
      },
      // 复合材料3D打印
      getData() {
        var myChart = echarts.init(document.getElementById("fhcl"));
        var option;
        var colorArray = [{
            top: "#ffa800", //黄
            bottom: "rgba(11,42,84,.3)",
          },
          {
            top: "#1ace4a", //绿
            bottom: "rgba(11,42,84, 0.3)",
          },
          {
            top: "#4bf3ff", //蓝
            bottom: "rgba(11,42,84,.3)",
          },
          {
            top: "#4f9aff", //深蓝
            bottom: "rgba(11,42,84,.3)",
          },
          // {
          //   top: "#b250ff", //粉
          //   bottom: "rgba(11,42,84,.3)",
          // },
        ];
        option = {
          backgroundColor: "",
          tooltip: {
            show: true,
            formatter: "{b}:{c}kg",
          },
          grid: {
            left: "5%",
            top: "12%",
            right: "1%",
            bottom: "8%",
            containLabel: true,
          },

          xAxis: {
            type: "value",
            show: false,
            position: "top",
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
              },
            },
            splitLine: {
              show: false,
            },
          },
          yAxis: [{
            type: "category",
            axisTick: {
              show: false,
              alignWithLabel: false,
              length: 5,
            },
            splitLine: {
              //网格线
              show: false,
            },
            inverse: "true", //排序
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
              },
            },
            data: [
              "ABS（料仓1）",
              "HIPS（料仓2）",
              "BASF（料仓3）",
              "PLA（料仓4）",
            ],
          }, ],
          series: [{
            name: "能耗值",
            type: "bar",
            label: {
              normal: {
                show: true,
                position: "right",
                formatter: "{c}kg",
                textStyle: {
                  color: "white", //color of value
                },
              },
            },
            itemStyle: {
              normal: {
                show: true,
                color: function (params) {
                  let num = colorArray.length;
                  return {
                    type: "linear",
                    colorStops: [{
                        offset: 0,
                        color: colorArray[params.dataIndex % num].bottom,
                      },
                      {
                        offset: 1,
                        color: colorArray[params.dataIndex % num].top,
                      },
                      {
                        offset: 0,
                        color: colorArray[params.dataIndex % num].bottom,
                      },
                      {
                        offset: 1,
                        color: colorArray[params.dataIndex % num].top,
                      },
                      {
                        offset: 0,
                        color: colorArray[params.dataIndex % num].bottom,
                      },
                      {
                        offset: 1,
                        color: colorArray[params.dataIndex % num].top,
                      },
                      {
                        offset: 0,
                        color: colorArray[params.dataIndex % num].bottom,
                      },
                      {
                        offset: 1,
                        color: colorArray[params.dataIndex % num].top,
                      },
                      {
                        offset: 0,
                        color: colorArray[params.dataIndex % num].bottom,
                      },
                      {
                        offset: 1,
                        color: colorArray[params.dataIndex % num].top,
                      },
                      {
                        offset: 0,
                        color: colorArray[params.dataIndex % num].bottom,
                      },
                      {
                        offset: 1,
                        color: colorArray[params.dataIndex % num].top,
                      },
                    ],
                    //globalCoord: false
                  };
                },
                barBorderRadius: 70,
                borderWidth: 0,
                borderColor: "#333",
              },
            },
            barGap: "0%",
            barCategoryGap: "50%",
            data: this.fhData,
          }, ],
        };
        option && myChart.setOption(option);
      },
      // 金属3D打印
      getData1() {
        var myChart = echarts.init(document.getElementById("jscl"));
        var option;
        var colorArray = [
          // {
          //   top: "#ffa800", //黄
          //   bottom: "rgba(11,42,84,.3)",
          // },
          // {
          //   top: "#1ace4a", //绿
          //   bottom: "rgba(11,42,84, 0.3)",
          // },
          {
            top: "#4bf3ff", //蓝
            bottom: "rgba(11,42,84,.3)",
          },
          // {
          //   top: "#4f9aff", //深蓝
          //   bottom: "rgba(11,42,84,.3)",
          // },
          // {
          //   top: "#b250ff", //粉
          //   bottom: "rgba(11,42,84,.3)",
          // },
        ];
        option = {
          backgroundColor: "",
          tooltip: {
            show: true,
            formatter: "{b}:{c}kg",
          },
          grid: {
            left: "5%",
            top: "12%",
            right: "1%",
            bottom: "8%",
            containLabel: true,
          },

          xAxis: {
            type: "value",
            show: false,
            position: "top",
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
              },
            },
            splitLine: {
              show: false,
            },
          },
          yAxis: [{
            type: "category",
            axisTick: {
              show: false,
              alignWithLabel: false,
              length: 5,
            },
            splitLine: {
              //网格线
              show: false,
            },
            inverse: "true", //排序
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              rich: {
                a: {
                  color: "#fff",
                  backgroundColor: "#f0f",
                  width: 20,
                  height: 20,
                  align: "center",
                  borderRadius: 2,
                },
              },
            },
            data: [
              "钛（料仓1）",
              "不锈钢（料仓2）",
              "铝（料仓3）",
              "工具钢（料仓4）",
              "镍合金（料仓5）",
            ],
          }, ],
          series: [{
            name: "能耗值",
            type: "bar",
            label: {
              normal: {
                show: true,
                position: "right",
                formatter: "{c}kg",
                textStyle: {
                  color: "white", //color of value
                },
              },
            },
            itemStyle: {
              normal: {
                show: true,
                color: function (params) {
                  let num = colorArray.length;
                  return {
                    type: "linear",
                    colorStops: [{
                        offset: 0,
                        color: colorArray[params.dataIndex % num].bottom,
                      },
                      {
                        offset: 1,
                        color: colorArray[params.dataIndex % num].top,
                      },
                      {
                        offset: 0,
                        color: colorArray[params.dataIndex % num].bottom,
                      },
                      {
                        offset: 1,
                        color: colorArray[params.dataIndex % num].top,
                      },
                      {
                        offset: 0,
                        color: colorArray[params.dataIndex % num].bottom,
                      },
                      {
                        offset: 1,
                        color: colorArray[params.dataIndex % num].top,
                      },
                      {
                        offset: 0,
                        color: colorArray[params.dataIndex % num].bottom,
                      },
                      {
                        offset: 1,
                        color: colorArray[params.dataIndex % num].top,
                      },
                      {
                        offset: 0,
                        color: colorArray[params.dataIndex % num].bottom,
                      },
                      {
                        offset: 1,
                        color: colorArray[params.dataIndex % num].top,
                      },
                      {
                        offset: 0,
                        color: colorArray[params.dataIndex % num].bottom,
                      },
                      {
                        offset: 1,
                        color: colorArray[params.dataIndex % num].top,
                      },
                    ],
                    //globalCoord: false
                  };
                },
                barBorderRadius: 70,
                borderWidth: 0,
                borderColor: "#333",
              },
            },
            barGap: "0%",
            barCategoryGap: "50%",
            data: this.jsData,
          }, ],
        };
        option && myChart.setOption(option);
      },
      // 图表三
      getData2() {
        var myChart = echarts.init(document.getElementById("lxbz"));
        var option;
        option = {
          backgroundColor: "",
          // title:{
          //   textStyle:{
          //       color:"#6a9cd5",
          //   },
          //   text:'张三英语成绩',
          //   left:"center",
          // },
          tooltip: {
            //鼠标悬浮弹出提示框
            trigger: "axis", //提示框弹出的触发时间，折线图和柱状图为axis
            formatter: "{a} <br/>{b} : {c} ", //提示框提示的信息，{a}series内的名字，{b}为块状的名字，{c}为数值
          },
          grid: {
            //统计图距离边缘的距离
            top: "15%",
            left: "10%",
            right: "10%",
            bottom: "10%",
          },
          xAxis: [{
            //x轴
            type: "category", //数据类型为不连续数据
            boundaryGap: false, //坐标轴两边是否留白
            axisLine: {
              //坐标轴轴线相关设置。数学上的x轴
              show: true,
              lineStyle: {
                color: "#233e64", //x轴颜色
              },
            },
            axisLabel: {
              //坐标轴刻度标签的相关设置
              textStyle: {
                color: "#6a9cd5",
              },
            },
            axisTick: {
              show: true,
            }, //刻度点数轴
            data: [
              "0",
              "2mm",
              "4mm",
              "6mm",
              "8mm",
              "10mm",
              "12mm",
              "14mm",
              "16mm",
              "18mm",
              "20mm",
            ],
          }, ],
          yAxis: [{
            //y轴的相关设置
            type: "value", //y轴数据类型为连续的数据
            // 			min: 0,//y轴上的刻度最小值
            // 			max:140,//y轴上的刻度最大值
            splitNumber: 7, //y轴上的刻度段数
            splitLine: {
              //y轴上的y轴线条相关设置
              show: true,
              lineStyle: {
                color: "#233e64",
              },
            },
            axisLine: {
              //y轴的相关设置
              show: true,
              lineStyle: {
                color: "#233e64", //y轴颜色
              },
            },
            axisLabel: {
              //y轴的标签相关设置
              formatter: "{value} ",
              textStyle: {
                color: "#6a9cd5",
              },
            },
            axisTick: {
              show: true,
            }, //刻度点数轴
          }, ],
          series: [{
            name: "力学表征",
            type: "line", //统计图类型为折线图
            smooth: true, //是否平滑曲线显示
            symbolSize: 0, //数据点的大小，[0,0]//b表示宽度和高度
            lineStyle: {
              //线条的相关设置
              normal: {
                color: "#3deaff", // 线条颜色
              },
            },
            areaStyle: {
              //区域填充样式
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [{
                      offset: 0,
                      color: "rgba(61,234,255, 0.9)",
                    },
                    {
                      offset: 0.7,
                      color: "rgba(61,234,255, 0)",
                    },
                  ],
                  false
                ),

                shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
              },
            },
            data: this.lxbzData,
          }, ],
        };
        option && myChart.setOption(option);
      },
      // 图表四
      getData3() {
        var myChart = echarts.init(document.getElementById("dcbz"));
        var option;
        option = {
          backgroundColor: "",
          // title:{
          //   textStyle:{
          //       color:"#6a9cd5",
          //   },
          //   text:'张三英语成绩',
          //   left:"center",
          // },
          tooltip: {
            //鼠标悬浮弹出提示框
            trigger: "axis", //提示框弹出的触发时间，折线图和柱状图为axis
            formatter: "{a} <br/>{b} : {c} ", //提示框提示的信息，{a}series内的名字，{b}为块状的名字，{c}为数值
          },
          grid: {
            //统计图距离边缘的距离
            top: "15%",
            left: "10%",
            right: "10%",
            bottom: "10%",
          },
          xAxis: [{
            //x轴
            type: "category", //数据类型为不连续数据
            boundaryGap: false, //坐标轴两边是否留白
            axisLine: {
              //坐标轴轴线相关设置。数学上的x轴
              show: true,
              lineStyle: {
                color: "#233e64", //x轴颜色
              },
            },
            axisLabel: {
              //坐标轴刻度标签的相关设置
              textStyle: {
                color: "#6a9cd5",
              },
            },
            axisTick: {
              show: true,
            }, //刻度点数轴
            data: [
              "0",
              "2.0G",
              "4.0G",
              "6.0G",
              "8.0G",
              "10.0G",
              "12.0G",
              "14.0G",
              "16.0G",
              "18.0G",
              "20.0G",
            ],
          }, ],
          yAxis: [{
            //y轴的相关设置
            type: "value", //y轴数据类型为连续的数据
            // 			min: 0,//y轴上的刻度最小值
            // 			max:140,//y轴上的刻度最大值
            splitNumber: 7, //y轴上的刻度段数
            splitLine: {
              //y轴上的y轴线条相关设置
              show: true,
              lineStyle: {
                color: "#233e64",
              },
            },
            axisLine: {
              //y轴的相关设置
              show: true,
              lineStyle: {
                color: "#233e64", //y轴颜色
              },
            },
            axisLabel: {
              //y轴的标签相关设置
              formatter: "{value} ",
              textStyle: {
                color: "#6a9cd5",
              },
            },
            axisTick: {
              show: true,
            }, //刻度点数轴
          }, ],
          series: [{
            name: "电磁表征",
            type: "line", //统计图类型为折线图
            smooth: true, //是否平滑曲线显示
            symbolSize: 0, //数据点的大小，[0,0]//b表示宽度和高度
            lineStyle: {
              //线条的相关设置
              normal: {
                color: "#1FEB10", // 线条颜色
              },
            },
            areaStyle: {
              //区域填充样式
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [{
                      offset: 0,
                      color: "#1FEB10",
                    },
                    {
                      offset: 0.7,
                      color: " rgba(31,235,16,0)",
                    },
                  ],
                  false
                ),

                shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
              },
            },
            data: this.dcbzData,
          }, ],
        };
        option && myChart.setOption(option);
      },
    },
  };
</script>

<style scoped>
  .main {
    width: 1920px;
    height: 1080px;
    background: #09161c;
    background-image: url("../assets/bg.png");
    background-size: 100%;
  }

  #img {
    width: 1920px;
    height: 88px;
  }

  .all {
    display: flex;
  }

  .labLeft {
    display: flex;
    flex-direction: column;
    margin: -33px 19px 0 21px;
  }

  .labEnvironment {
    width: 467px;
    height: 169px;
    display: flex;
    justify-content: space-around;
    background-image: url("../assets/syshj.png");
    background-size: 100%;
  }

  .temp {
    width: 206px;
    height: 74px;
    margin-top: 66px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url("../assets/syswd.png");
    background-size: 100%;
  }

  .humidity {
    width: 206px;
    height: 74px;
    margin-top: 66px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url("../assets/syssd.png");
    background-size: 100%;
  }

  .syswd {
    height: 20px;
    font-size: 14px;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi-Regular;
    color: rgba(3, 255, 255, 0.76);
    line-height: 8px;
  }

  #num {
    width: 20px;
    height: 36px;
    font-size: 26px;
    font-family: Barlow, Barlow-Condensed Medium;
    font-weight: normal;
    color: #3de7e7;
    line-height: 50px;
  }

  #dw {
    width: 17px;
    height: 26px;
    font-size: 22px;
    font-family: Barlow, Barlow-Condensed Medium;
    font-weight: normal;
    color: #3de7e7;
    line-height: 41px;
  }

  .intervene {
    width: 467px;
    height: 278px;
    margin-top: 18px;
    background-image: url("../assets/sygy.png");
    background-size: 100%;
  }

  .remindMain {
    height: 60%;
    margin: 60px 0 0 20px;
    display: flex;
    overflow: scroll;
    flex-direction: column;
  }

  /* 隐藏滚动条 */
  ::-webkit-scrollbar {
    display: none;
  }

  .remind {
    font-size: 14px;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi-Regular;
    color: #ffffff;
    display: flex;
    margin-bottom: 10px;
  }

  #new {
    /* width: 69px; */
    height: 24px;
    display: flex;
    font-size: 14px;
    line-height: 24px;
    margin-left: 20px;
    justify-content: center;
  }

  .tag {
    width: 69px;
    height: 24px;
    background-size: 100%;
    background-image: url("../assets/14.png");
  }

  #tagert {
    position: relative;
    left: 30px;
  }

  .testingTable {
    width: 906px;
    height: 432px;
    background-image: url("../assets/9.png");
    background-size: 100%;
  }

  .testingTitle {
    width: 90%;
    height: 40px;
    display: flex;
    color: #fff;
    margin: 30px auto 0;
    align-items: center;
    justify-content: space-between;
  }

  .newTesing {
    width: 76px;
    height: 30px;
    background-image: url("../assets/3.png");
    background-size: 100%;
    font-size: 14px;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi-Medium;
    font-weight: 500;
    text-align: center;
    color: #03ffff;
    line-height: 30px;
  }

  .centery {
    width: 55%;
    display: flex;
    align-items: center;
    margin: 0 auto;
    justify-content: space-between;
    font-size: 22px;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi-Bold;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 2px 3px 3px 0px rgba(0, 0, 0, 0.6);
  }

  #lll {
    width: 62px;
    height: 12px;
  }

  #rrr {
    width: 62px;
    height: 12px;
  }

  .testingHistroy {
    width: 76px;
    height: 30px;
    background-image: url("../assets/3.png");
    background-size: 100%;
    font-size: 14px;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi-Medium;
    font-weight: 500;
    text-align: center;
    color: #03ffff;
    line-height: 30px;
  }

  .testingContent {
    width: 813px;
    height: 30px;
    opacity: 0.32;
    color: #fff;
    display: flex;
    margin: 0 auto;
    text-align: left;
    justify-content: space-around;
    background: linear-gradient(180deg, rgba(79, 255, 251, 0), #4ffffb);
    border-radius: 4px;
  }

  #tableList {
    width: 813px;
    height: 40px;
    background: rgba(79, 255, 251, 0.05);
    border: 1px solid rgba(79, 255, 251, 0.3);
    border-radius: 4px;
    margin: 6px auto;
    color: #fff;
    display: flex;
    justify-content: space-around;
    line-height: 40px;
    text-align: left;
    align-items: center;
  }

  .equipmentMonitoring {
    width: 1391px;
    height: 520px;
    margin: 13px 18px 0 21px;
    background-image: url("../assets/sbjc.png");
    background-size: 100%;
    display: flex;
    align-items: center;
  }

  #change {
    width: 32px;
    height: 137px;
    margin-top: -20px;
  }

  .equipmentList {
    width: 93%;
    margin: 0 auto;
    display: flex;
  }

  .unit {
    width: 248px;
    /* height: 179px; */
    margin: 0 8px;
    background-image: url("../assets/16.png");
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .unitTxt {
    font-size: 19px;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi-Bold;
    font-weight: 700;
    text-align: center;
    color: #ffffff;
    padding-top: 5px;
    text-shadow: 2px 3px 3px 0px rgba(0, 0, 0, 0.6);
  }

  .testInfo {
    width: 225px;
    height: 56px;
    background-size: 100%;
    color: #fff;
    margin-top: 20px;
    text-align: center;
    font-size: 13px;
    line-height: 24px;
    background-image: url("../assets/17.png");
  }

  .equipInfo {
    width: 225px;
    height: 25px;
    background: #00505a;
    border-radius: 12px;
    display: flex;
    margin-top: 10px;
    line-height: 25px;
    justify-content: space-between;
  }

  .equxxx {
    font-size: 15px;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi-Regular;
    color: #ffffff;
    padding-left: 10px;
  }

  .equyyy {
    font-size: 15px;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi-Regular;
    color: #4ffffb;
    padding-right: 10px;
  }

  #ThreeImg {
    width: 222px;
    height: 116px;
    margin: 20px 0 0 5px;
  }

  .rightTablefh {
    width: 467px;
    height: 210px;
    margin: -33px 0 14px 0;
    background: url("../assets/fh3D.png");
    background-size: 100%;
  }

  .rightTablejs {
    width: 467px;
    height: 243px;
    margin: 0 0 14px 0;
    background: url("../assets/js3D.png");
    background-size: 100%;
  }

  .rightTablelx {
    width: 467px;
    height: 252px;
    margin: 0 0 14px 0;
    background: url("../assets/lxbzsy.png");
    background-size: 100%;
  }

  .rightTabledc {
    width: 467px;
    height: 254px;
    margin: 0 0 14px 0;
    background: url("../assets/dcbzsy.png");
    background-size: 100%;
  }

  #fhcl {
    width: 100%;
    height: 80%;
    display: inline-block;
    margin: 20px 0 0 0;
  }

  .intro {
    opacity: 0.52;
    font-size: 13px;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi-Regular;
    color: #ffffff;
    padding: 0 0 0 40px;
  }

  #jscl {
    width: 100%;
    height: 80%;
    display: inline-block;
    margin: 20px 0 0 0;
  }

  #lxbz {
    width: 100%;
    height: 90%;
    display: inline-block;
    margin: -20px 0 0 0;
  }

  .lxbzbg {
    width: 95%;
    height: 85%;
    display: inline-block;
    margin: 15px 0 0 10px;
    background-image: url("../assets/lxbg.png");
    background-size: 100%;
    background-repeat: no-repeat;
  }

  #dcbz {
    width: 100%;
    height: 90%;
    display: inline-block;
    margin: -20px 0 0 0;
  }

  .dcbzbg {
    width: 95%;
    height: 88%;
    display: inline-block;
    margin: 15px 0 0 10px;
    background-image: url("../assets/dcbg.png");
    background-size: 100%;
    background-repeat: no-repeat;
  }

  #styleNone {
    width: 57px;
    height: 23px;
    font-size: 14px;
    background-image: url("../assets/wei.png");
    background-size: 100%;
    background-repeat: no-repeat;
    text-align: center;
    line-height: 23px;
  }

  #styleYes {
    width: 57px;
    height: 23px;
    font-size: 14px;
    background-image: url("../assets/zhong.png");
    background-size: 100%;
    background-repeat: no-repeat;
    text-align: center;
    line-height: 23px;
  }

  #styleDone {
    width: 57px;
    height: 23px;
    font-size: 14px;
    background-image: url("../assets/wan.png");
    background-size: 100%;
    background-repeat: no-repeat;
    text-align: center;
    line-height: 23px;
  }

  ul {
    list-style-type: none;
  }

  li {}
</style>
